<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 商品信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
          <el-button type="primary" icon="el-icon-search" @click=handleAddgoods>添加</el-button>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"

            >
              <el-table-column prop="Goods_id" label="商品编号" align="center" ></el-table-column>
              <el-table-column prop="Goods_name" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="Goods_number" label="商品数量" align="center"></el-table-column>
              <el-table-column prop="Goods_price" label="商品单价" align="center"></el-table-column>
              <el-table-column prop="Factory_id" label="工厂编号" align="center"></el-table-column>
              <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                      <el-button
                          type="text"
                          icon="el-icon-edit"
                          @click="handlebuyGoods(scope.row)"
                      >购买</el-button>
                      <el-button
                          type="text"
                          icon="el-icon-delete"
                          class="red"
                          @click="handleDelete(scope.row)"
                      >删除</el-button>
                    </template>
              </el-table-column>
            </el-table>
        </div>

        <!-- 添加弹出框 -->
      <el-dialog title="添加" :visible.sync="addVisible" width="30%">
                     <el-form ref="form" :model="form" label-width="70px">
                     <el-form-item label="商品编号">
                    <el-input v-model="tempgoodsData.goods_id"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称">
                    <el-input v-model="tempgoodsData.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量">
                    <el-input v-model="tempgoodsData.goods_number"></el-input>
                    </el-form-item>
			            	<el-form-item label="商品单价">
                    <el-input v-model="tempgoodsData.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="厂家编号">
                    <el-input v-model="tempgoodsData.factory_id"></el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="addgoods">确 定</el-button>
            </span>
        </el-dialog>

      <el-dialog title="购买" :visible.sync="buyVisible" width="30%">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="订单编号">
            <el-input v-model="orderData.order_id"></el-input>
          </el-form-item>
          <el-form-item label="顾客编号">
            <el-input v-model="orderData.consumer_id"></el-input>
          </el-form-item>
          <el-form-item label="商品编号">
            <el-input v-model="orderData.goods_id"></el-input>
          </el-form-item>
          <el-form-item label="下单日期">
            <el-input v-model="orderData.order_date"></el-input>
          </el-form-item>
          <el-form-item label="订单要求">
            <el-input v-model="orderData.order_request"></el-input>
          </el-form-item>
          <el-form-item label="运费">
            <el-input v-model="orderData.order_freight"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="buyVisible = false">取 消</el-button>
                <el-button type="primary" @click="buyGoods">确 定</el-button>
            </span>
      </el-dialog>



    </div>


</template>

<script>
import {Addgoods, goodsdelete, fetchgetgoods, fetchBuyGoods} from '../index';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            tempgoodsData:{},
            orderData:{},
            multipleSelection: [],
            delList: [],
            addVisible: false,
            buyVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
      getData() {
        fetchgetgoods().then(res =>{console.info(res)

          this.tableData=res.data.value
          console.log(this.tableData)
        })
      },
      // 购买操作
      handlebuyGoods(row){
        this.orderData = row;
        this.buyVisible = true;
      },
      // 购买成功
      buyGoods() {
        this.buyVisible = false;
        this.$message.success(`下单成功`);
        fetchBuyGoods(this.orderData).then(res =>{console.info(res)
          console.log(this.orderData)
          window.location.reload()
        })
      },

      //删除操作
      handleDelete(row){
        this.tableData = row
        goodsdelete(this.tableData).then(res=>{console.info(res)
          console.log(this.tableData)
          console.log(res)
          window.location.reload()
        })
      },

        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
      handleAddgoods(){
        this.addVisible = true;
      },
      addgoods() {
        this.addVisible = false;
        this.$message.success(`添加成功`);
        Addgoods(this.tempgoodsData).then(res =>{console.info(res)
          console.log(this.tempgoodsData)
          console.log(res)
          window.location.reload()
        })
      },
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
